<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
    v-for="item in items"
    - items：要遍历的数组，需要在vue的data中定义好。
    - item：迭代得到的数组元素的别名
    v-for="(item,index) in items"
    index：迭代到的当前元素索引，从0开始。
    -->
    <!--
         迭代对象
    v-for="value in object"
    v-for="(value,key) in object"
    v-for="(value,key,index) in object"
    - 1个参数时，得到的是对象的值
    - 2个参数时，第一个是值，第二个是键
    - 3个参数时，第三个是索引，从0开始
    -->
    <!--
    <li v-for="(item,index) in items" :key=index></li>
    加上key,就可以只渲染改变的属性,
    否则所有的都渲染
    -->
</head>
<body>
<div id="app">
    <ul>
        <li v-for="user in users">
            <!-- {{user.name}}}  :  {{user.age}}}  :  {{user.gender}}}-->
             <span v-text="user.name"></span>  :
             <span v-text="user.age"></span>  :
             <span v-text="user.gender"></span><br>

        </li>
        <li v-for="(user,index) in users">
            <!-- {{user.name}}}  :  {{user.age}}}  :  {{user.gender}}}-->
            <span v-text="index"></span>  :
            <span v-text="user.name"></span>  :
            <span v-text="user.age"></span>  :
            <span v-text="user.gender"></span>

        </li>
        <li v-for="(value,key,index) in friend">
            <span v-text="index"></span>  :
            <span v-text="key"></span>  :
            <span v-text="value"></span>  :
        </li>
    </ul>
</div>
</body>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    let vm = new Vue({
        el: "#app",
        data: {
            users: [
                {name: "朱圣祥", age: 25, gender: "男"},
                {name: "朱大祥", age: 28, gender: "男"},
                {name: "朱小祥", age: 20, gender: "男"},
                {name: "朱中祥", age: 23, gender: "男"},

            ],
            friend:{
                name:"wy",age:23,gender:"女"
            }
        }
    });

</script>
</html>